<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
		<title>浑水摸鱼</title>
		<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" href="assets/css/font-awesome.min.css">
		<link rel="stylesheet" type="text/css" href="assets/css/select2.min.css">
		<link rel="stylesheet" type="text/css" href="assets/css/dataTables.bootstrap4.min.css">
		<link rel="stylesheet" type="text/css" href="assets/css/bootstrap-datetimepicker.min.css">
		<link rel="stylesheet" type="text/css" href="assets/css/style.css">
		<!-- <link rel="stylesheet" type="text/css" href="assets/css/add.css" /> -->
	</head>

	<body>
		<div class="main-wrapper">
			<div class="header">
				<div class="header-left">
					<a href="index.html" class="logo">
						<img src="assets/img/logo.png" width="35" height="35" alt=""> <span>混水摸鱼</span>
					</a>
				</div>
				<a id="toggle_btn" href="javascript:void(0);"><i class="fa fa-bars"></i></a>
				<a id="mobile_btn" class="mobile_btn float-left" href="#sidebar"><i class="fa fa-bars"></i></a>
				<ul class="nav user-menu float-right">
					<li class="nav-item dropdown d-none d-sm-block">
						<a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown"><i class="fa fa-bell-o"></i>
							<span class="badge badge-pill bg-danger float-right">3</span></a>
						<div class="dropdown-menu notifications">
							<div class="topnav-dropdown-header">
								<span>提醒</span>
							</div>

							<div class="topnav-dropdown-footer">
								<a href="activities.html">查看所有提醒</a>
							</div>
						</div>
					</li>
					<li class="nav-item dropdown d-none d-sm-block">
						<a href="javascript:void(0);" id="open_msg_box" class="hasnotifications nav-link"><i
								class="fa fa-comment-o"></i> <span
								class="badge badge-pill bg-danger float-right">8</span></a>
					</li>
					<li class="nav-item dropdown has-arrow">
						<a href="#" class="dropdown-toggle nav-link user-link" data-toggle="dropdown">
							<span class="user-img"><img class="rounded-circle" src="assets/img/user.jpg" width="40"
									alt="Admin">
								<span class="status online"></span></span>
							<span>用户</span>
						</a>
						<div class="dropdown-menu">
							<a class="dropdown-item" href="profile.html">我的个人资料</a>
							<a class="dropdown-item" href="edit-profile.html">编辑个人资料</a>
							<a class="dropdown-item" href="settings.html">设置</a>
							<a class="dropdown-item" href="login.html">注销</a>
						</div>
					</li>
				</ul>
				<div class="dropdown mobile-user-menu float-right">
					<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i
							class="fa fa-ellipsis-v"></i></a>
					<div class="dropdown-menu dropdown-menu-right">
						<a class="dropdown-item" href="profile.html">我的个人资料</a>
						<a class="dropdown-item" href="edit-profile.html">编辑个人资料</a>
						<a class="dropdown-item" href="settings.html">设置</a>
						<a class="dropdown-item" href="login.html">注销</a>
					</div>
				</div>
			</div>
			<div class="sidebar" id="sidebar">
				<div class="sidebar-inner slimscroll">
					<div id="sidebar-menu" class="sidebar-menu">
						<ul>
							<li class="menu-title">主页</li>
							<li class="active">
								<a href="experience.html"><i class="fa fa-wheelchair"></i> <span>经验</span></a>
							</li>
							<li >
								<a href="arrange.html"><i class="fa fa-calendar-check-o"></i> <span>维护信息</span></a>
							</li>
							<li>
								<a href="liaisons.html"><i class="fa fa-user"></i> <span> 联系人 </span></a>
							</li>
							<li>
								<a href="record.html"><i class="fa fa-calendar"></i> <span> 优化日志 </span></a>
							</li>
							<li>
								<a href="etextxx.html"><i class="fa fa-comments"></i> <span> Texts </span></a>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<div class="page-wrapper">
				<div class="content">
					<div class="row">
						<div class="col-sm-4 col-3">
							<h4 class="page-title">添加信息</h4>
						</div>
					</div>
					<form id="myForm">
						<div class="card-box">
							<h3 class="card-title">基础信息</h3>
							<div class="row">
								<div class="col-md-12">
									<div class="profile-img-wrap">
										<img class="inline-block" src="assets/img/user.jpg" alt="user">
										<div class="fileupload btn">
											<span class="btn-text">添加头像</span>
											<input class="upload" type="file">
										</div>
									</div>
									<div class="profile-basic">
										<div class="row">
											<div class="col-md-6">
												<div class="form-group form-focus">
													<label class="focus-label">经验种类</label>
													<input type="text" class="form-control floating" placeholder="实践经验"
														id="expkind">
												</div>
											</div>
											<div class="col-md-6">
												<div class="form-group form-focus">
													<label class="focus-label">网络设备名称</label>
													<input type="text" class="form-control floating"
														placeholder="DNS服务器" id="devicename">
												</div>
											</div>
											<div class="col-md-6">
												<div class="form-group form-focus">
													<label class="focus-label">网络设备所处区域</label>
													<input type="text" class="form-control floating" placeholder="雷州市"
														id="devicename">
												</div>
											</div>
											<div class="col-md-6">
												<div class="form-group form-focus">
													<label class="focus-label">网络设备故障表现</label>
													<input class="form-control floating" type="text"
														placeholder="路由器重启频繁或崩溃" id="devicefault">
												</div>
											</div>
											<div class="col-md-6">
												<div class="form-group form-focus">
													<label class="focus-label">网络测试信号差异</label>
													<input type="text" class="form-control floating" placeholder="9"
														id="testsign">
												</div>
											</div>
											<div class="col-md-6">
												<div class="form-group form-focus">
													<label class="focus-label">技术经验标题</label>
													<input type="text" class="form-control floating" placeholder="学术经验"
														id="exprubric">
												</div>
											</div>
											<div class="col-md-6">
												<div class="form-group form-focus">
													<label class="focus-label">技术经验内容</label>
													<input type="text" class="form-control floating" placeholder="技术应用"
														id="exprubric">
												</div>
											</div>
											<div class="col-md-6">
												<div class="form-group form-focus">
													<label class="focus-label">创建时间</label>
													<input class="form-control floating" type="text"
														placeholder="1646720171706" id="pubdate">
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="text-center m-t-20">
							<button class="btn btn-primary submit-btn" type="submit">保存</button>
						</div>
					</form>
				</div>
			</div>
			<div class="notification-box">
				<div class="msg-sidebar notifications msg-noti">
					<div class="topnav-dropdown-header">
						<span>消息</span>
					</div>

					<div class="topnav-dropdown-footer">
						<a href="chat.html">查看所有消息</a>
					</div>
				</div>
			</div>
		</div>
		</div>
		</div>
		<div class="sidebar-overlay" data-reff=""></div>
		<script src="assets/js/jquery-3.2.1.min.js"></script>
		<script src="assets/js/popper.min.js"></script>
		<script src="assets/js/bootstrap.min.js"></script>
		<script src="assets/js/jquery.slimscroll.js"></script>
		<script src="assets/js/select2.min.js"></script>
		<script src="assets/js/jquery.dataTables.min.js"></script>
		<script src="assets/js/dataTables.bootstrap4.min.js"></script>
		<script src="assets/js/moment.min.js"></script>
		<script src="assets/js/bootstrap-datetimepicker.min.js"></script>
		<!-- <script src="assets/js/app.js"></script> -->
		<script src="assets/js/experience.js"></script>
		<script>
			// 获取值
			$(document).ready(function() {
				$('#myForm').submit(function(event) {
					event.preventDefault(); // 防止表单提交
					var expkind = $('#expkind').val(); // 获取名字输入框的值
					var devicename = $('#devicename').val();
					var devicearea = $('#devicearea').val();
					var devicefault = $('#devicefault').val();
					var testsign = $('#testsign').val();
					var exprubric = $('#exprubric').val();
					var expstate = $('#expstate').val();
					var pubdate = $('#pubdate').val();
					console.log(expkind, devicename, devicearea, devicefault, testsign, exprubric, expstat,
						pubdate);
					// 在这里可以对获取到的值进行操作，例如发送到服务器
				});
			});
			//将数据渲染至表单中
			$(document).ready(function() {
				// 模拟从服务器获取数据
				var data = {
					expkind: "实践经验",
					devicename: "DNS服务器",
					devicearea: "雷州市",
					devicefault: "路由器重启频繁或崩溃",
					testsign: "9",
					exprubric: "学术经验",
					expstate: "技术应用",
					pubdate: "1646720171706"
				};
				// 将数据渲染至表单中
				$('#expkind').attr('placeholder', data.expkind);
				$('#devicename').attr('placeholder', data.devicename);
				$('#devicearea').attr('placeholder', data.devicearea);
				$('#devicefault').attr('placeholder', data.devicefault);
				$('#testsign').attr('placeholder', data.testsign);
				$('#exprubric').attr('placeholder', data.exprubric);
				$('#expstate').attr('placeholder', data.expstate);
				$('#pubdate').attr('placeholder', data.pubdate);
			});
		</script>
	</body>

</html>
